<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>read</title>
    <link rel="icon" href="/img/TIM截图20190121225434.png" >
    <link rel="stylesheet" type="text/css" href="/layui/css/layui.css">
    <link rel="stylesheet" type="text/css" href="../css/read/main.css">
    <link rel="stylesheet" type="text/css" href="../css/read/read.css">

    <script type="text/javascript" src="/js/read/commons.js"></script>
    <script type="text/javascript" src="/js/framework/jquery-3.2.1.min.js"></script>
    <script type="text/javascript" src="../js/framework/vue.js"></script>

    <!-- 使用的外部的md的预览框架 不用editormd框架了 这个简单 -->
    <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
    <link href="http://cdn.bootcss.com/highlight.js/8.0/styles/monokai_sublime.min.css" rel="stylesheet">
    <script src="http://cdn.bootcss.com/highlight.js/8.0/highlight.min.js"></script>
    <script>hljs.initHighlightingOnLoad();</script>
    <!-- <link rel="stylesheet" href="../../assets/highlight/styles/default.css">
<script type="text/javascript" charset="UTF-8" src="../../assets/highlight/highlight.pack.js"></script> -->

</head>
<body>
    
    <div class="header">
          <h1 class="logo">
            <a href="index.html">
              <span >-001</span>
            </a>
          </h1>
          <div class="nav">
            <a href="/index.html">首页</a>
            <a href="/html/article.html">文章</a>
            <a href="/html/archive.html">归档</a>
            <a href="/html/about.html" class="active">关于</a>
          </div>
          <ul class="layui-nav header-down-nav">
            <li class="layui-nav-item"><a href="/index.html">首页</a></li>
            <li class="layui-nav-item"><a href="/html/article.html">文章</a></li>
            <li class="layui-nav-item"><a href="/html/archive.html">归档</a></li>
            <li class="layui-nav-item"><a href="/html/about.html" class="active">关于</a></li>
          </ul>

    </div>

    <div class="read-banner">
      
    </div>

    <div id="read-content" class="content">
      <div class="content-header">
            <h1 class="content-h1" align="center">{{ article.title }}</h1>
            <p class="content-time">{{ article.publishTime }}</p>
            <div class="content-label">
              {{ article.label }}
            </div>
      </div>
      <hr style="background-color: red; height: 2.5px;margin-top: 0px">
      <pre><code>

      <div id="content">
        <!-- {{ article.content }} -->
       
      </div> 
      </code></pre>

      <div id="comment" >

        <div id="comment-tip">
            <span>评论区</span>
            <br>
            <br>
        </div>

        <hr style="background-color: red; height: 2.5px;">

        <textarea id="comment-text">

    暂时没开
        </textarea>

        <button class="btn" style="float:right;">提交</button>

    </div>

    </div>

    <div class="footer-a">
        <div class="text">
            <h4 class="title">-001&nbsp一片秋叶个人笔记</h4>
            <p>v2.0&nbsp&nbsp<span class="WeChat"> redwys.xyz 桂ICP备18004478号-1&nbsp&nbsp©</span></p>
        </div>
    </div>

<!-- js -->
    <script>
      // document.getElementById('content').innerHTML =

      //     // marked('# Marked in the browser\n\nRendered by **marked**. \n\n ```java String sa ``` ');
      //     marked("# read新开发 前面开发的read个人blog项 sdaf ```asdfas ``` ");

      // 博客阅读
      $(function () {
        var blogtitle = localStorage.getItem("blogtitle");
        // alert(blogtitle);
        $.ajax({
            url:config.url.get_article_one+blogtitle,
            type:'GET',
            autoParam: blogtitle,
            contentType:'application/json; charset=UTF-8',
            success:function (result) {
                articleVue.article = result.data;
                // console.log(articleVue.article.content);

                // document.getElementById('content').innerHTML = marked(articleVue.article.content);
                markedrendererMD(articleVue.article.content);
            },
            error: function() {
                console.log("服务器获取失败");
            }
        });

      });

      var articleVue = new Vue({
          el: '#read-content',
          data: {
              article: {},
              // [
              //    { title: "aaa", img: "/img/b.jpg", info: "a", content: "点加载完成,要放在t开" , publishTime: "a", category:"a",label:"的室内"}
              //   ],
          },
          methods: {

          }
      });
      
      // marked
      function markedrendererMD(article) {
        
        var rendererMD = new marked.Renderer();
        marked.setOptions({
          renderer: rendererMD,
          gfm: true,
          tables: true,
          breaks: false,
          pedantic: false,
          sanitize: false,
          smartLists: true,
          smartypants: false
        });
        // var markdownString = '```js\n console.log("hello"); \n```';
        marked.setOptions({
            highlight: function (code) {
            return hljs.highlightAuto(code).value;
          }
        });

        document.getElementById('content').innerHTML = marked(article);
    }

    </script>
    
</body>
</html>